<template>
  <div class="card-out-container">
    <a-spin :spinning="spinning">
    <a-form layout="inline" v-if="showMore"  class="multi-line-search-form">
      <a-form-item :label="$t('other.HangerNo')">
        <a-input v-model:value="queryParam.hangerNo" :placeholder="$t('other.enterHangerNo')" allowClear />
      </a-form-item>
      <a-form-item :label="$t('hangManage.makeNo')">
        <a-input v-model:value="queryParam.moNo" :placeholder="$t('other.pleaseInputMakeNo')" allowClear />
      </a-form-item>
      <a-form-item :label="$t('basicData.styleNo')">
        <a-input v-model:value="queryParam.styleNo" :placeholder="$t('basicData.pleaseInputStyleNo')" allowClear />
      </a-form-item>
      <a-form-item :label="$t('other.doneTime')">
        <a-range-picker v-model:value="queryParam.time" :placeholder="[$t('common.startDate'), $t('common.endDate')]" valueFormat="YYYY-MM-DD" format="YYYY-MM-DD" />
      </a-form-item>
      <a-form-item>
        <a-space>
          <a-button type="primary" @click="loadData">{{ $t('common.see') }}</a-button>
          <a-button @click="searchReset">{{ $t('common.reset') }}</a-button>
        </a-space>
      </a-form-item>
    </a-form>

<!--    <div class="custom-table">-->
<!--      <div  :class="['list-operate3', {'show-more': showMore}]">-->
<!--        <div class="operate-left">-->
<!--          <a-button type="primary" @click="handleExportXls(url.exportUrl, '衣架追踪报表', true)">{{ $t('common.outputExcel') }}</a-button>-->
<!--          <a-button type="primary" ghost @click="printTable">打印</a-button>-->
<!--        </div>-->
<!--        <div class="operate-right">-->
<!--          <div class="slot-operate-right">-->
<!--            <a-input-search v-model:value="queryParam.hangerNo" placeholder="衣架号"  enter-button   v-if="!showMore" @search="loadData" />-->
<!--            <a-button class="ml-10" @click="toggleMore" type="primary" ghost>高级筛选</a-button>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->

      <CustomTable  :operateMargin="true" :drag="false" storeTableName="hangerTrackTable" tableColumnsSort="hangerTrackTableSort" rowKey="id" :loading="loading" bordered size="small"
                    :dataSource="dataSource" :columns="columns" :scroll="{y: 'calc(100vh - 390px)'}"
                    :rowSelection = null
                    :pagination="ipagination"
                    @change="handleTableChange"
                    :showMore="showMore"
      >
        <template #operateLeft>
          <div class="operate-left">
            <a-button type="primary" @click="exportTable">{{ $t('common.outputExcel') }}</a-button>
            <!--<a-button type="primary" ghost @click="printTable">打印</a-button>-->
          </div>
        </template>
        <template #operateRight>
          <div class="slot-operate-right">
            <a-input-search v-model:value="queryParam.hangerNo" :placeholder="$t('other.HangerNo')"  enter-button   v-if="!showMore" @search="loadData" />
            <a-button class="ml-10" @click="toggleMore" type="primary" ghost>{{ $t('common.highFilter') }}</a-button>
          </div>
        </template>
        <template #bodyCell="{ scope }">
          <template v-if="scope.column.key === 'finishSign'">
            <span class="code-link">{{ scope.record.finishSign ?$t('other.yes'):$t('other.no')}}</span>
          </template>
        </template>
      </CustomTable>
<!--    <a-table rowKey="id" :loading="loading" bordered size="small" :dataSource="dataSource" :columns="columns" :scroll="{y: 'calc(100vh - 390px)'}" :pagination="ipagination" @change="handleTableChange">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'code'">
          <span class="code-link">{{record.code}} </span>
        </template>
      </template>
    </a-table>-->
      <div  style="display:none;" >
        <a-table  id="printId" :loading="loading"  bordered size="small" :dataSource="printDataList" :columns="printColumnsArr" :pagination="false" >

        </a-table>
      </div>
    </a-spin>
  </div>
</template>
<script>
import { ListMixinPm } from '@/mixin/listMixinPm.js'
import { columns } from './modules/config.js'
import {cloneDeep} from "lodash";
import {endTimeValue, filterObj, getLocalStorage, startTimeValue} from "@/utils";
import axios from "@/utils/request";
import printJS from "print-js";
import CustomTable from '@/components/commonTable/customTable.vue'
export default {
  name: 'hangerTrack',
  components:{
    CustomTable
  },
  mixins: [ListMixinPm],
  data () {
    return {
      columns: columns,
      spinning: false,
      printDataList: [],
      url: {
        list: '/api/report/get-hanger-track',
        exportUrl: '/api/report/export-hanger-track'
      },
      columnsArr : [],
      columnsTitleArr : [],
      printColumnsArr : [],
    }
  },
  methods: {
    getQueryParams () {
      this.getColumnsList()
      let param = cloneDeep(this.queryParam)
      if (this.queryParam.time && this.queryParam.time.length) {
        param.moStartTime = startTimeValue(this.queryParam.time[0])
        param.moEndTime = endTimeValue(this.queryParam.time[1])
      }
      delete param.time
      param.sortingFields = this.isorter.field ?  [this.isorter] : null
      param.pageNo = this.ipagination.current
      param.pageSize = this.ipagination.pageSize
      return filterObj(param)
    },

    async printTable(){
      await this.getColumnsList();
      this.queryParam.pageNo = 1
      this.queryParam.pageSize = 65335
      this.queryParam.columns = this.columnsArr
      // console.log(this.queryParam)
      const res = await axios.postAction(this.url.list, this.queryParam);
      if (!res.data) return
      this.spinning = true;
      if (res){
        this.printDataList = res.data.list;
        // console.log(this.printDataList)
        if(this.printDataList.length > 0 ){
          setTimeout(() => {
            this.printTableData();
            this.spinning = false;
          }, 2000);
        }else{
          this.spinning = false;
        }
      }
    },
    //打印  请求做好的导出接口 变更数据展示
    printTableData() {
      printJS({
        printable: "printId", // 标签元素id
        type: "html",
        documentTitle: "["+this.$t('other.trackHanger')+"]",
        style: "#printId{width:100%;} "
            +  " #printId .ant-table-thead>tr>th, #printId .ant-table-tbody>tr>td  {border: 1px solid #bcb8b8;border-collapse: collapse;} "
            +  " #printId table{border-collapse: collapse;} "
      });
    },

    async exportTable(){
      await this.getColumnsList()
      let param = { No: 1, pageSize: 65335, columns:this.columnsArr ,tables:this.columnsTitleArr }
      // console.log(param)
      this.exportExcels(this.url.exportUrl, this.$t('other.trackHangerTable'), true,param)
    },
    async getColumnsList(){
      let colArr = [];
      let paramsArr = [];
      let titleArr = [];
      let hangerTrackTable =  getLocalStorage("hangerTrackTable") ? getLocalStorage("hangerTrackTable") : columns;
      // console.log(hangerTrackTable)
      if (hangerTrackTable && hangerTrackTable.length>0){
        hangerTrackTable.forEach(
            item=>{
              if (!item.disappear){
                paramsArr.push(item.dataIndex)
                titleArr.push(item.title)
                colArr.push(item)
              }
            }
        )
      }
      this.columnsArr = paramsArr;
      this.columnsTitleArr = titleArr;
      this.printColumnsArr = colArr;
      // console.log(colArr,titleArr,paramsArr)
    },

  },
}
</script>
